<template>
<div >
    <div class="header">
        <div class="locaiton">河南师范大学（平原湖）</div>
      <div class="search">
        <i class="fa fa-search" @click="search()"></i>
        <input type="text" placeholder="搜索饿了么商家，商品名称" v-model="searchKey" class="SearchInput">
      </div>
    </div>
    <div class="nav">
    <ul class="nav-ul01">
    <li>
            <img src="../img/dcfl01.png" alt="美食" @click="toBusList(1)">  
            <p class="picture-expain">美食</p>
    </li>
        <li >
            <img src="../img/dcfl02.png" alt="早餐" @click="toBusList(2)">
            <p class="picture-expain">早餐</p>
        </li>
        <li>
            <img src="../img/dcfl03.png" alt="跑腿代购" @click="toBusList(3)">
            <p class="picture-expain">跑腿代购</p>
        </li>
        <li>
           
            <img src="../img/dcfl04.png" alt="汉堡披萨" @click="toBusList(4)">
            <p class="picture-expain">汉堡披萨</p>
   
       
        </li>
        <li>
           
            <img src="../img/dcfl05.png" alt="甜品饮品" @click="toBusList(5)">
            <p class="picture-expain">甜品饮品</p>
     
        </li>
        <li>
            <img src="../img/dcfl06.png" alt="速食简餐" @click="toBusList(6)">
            <p class="picture-expain">速食简餐</p>
        </li>
        <li>   
            <img src="../img/dcfl07.png" alt="地方小吃" @click="toBusList(7)">
            <p class="picture-expain">地方小吃</p>
        </li>
        <li>
            <img src="../img/dcfl08.png" alt="米粉面馆" @click="toBusList(8)">
            <p class="picture-expain">米粉面馆</p>
        </li>
        <li>
            <img src="../img/dcfl09.png" alt="包子粥铺" @click="toBusList(9)">
            <p class="picture-expain">包子粥铺</p>
        </li>
        <li>
            <img src="../img/dcfl10.png" alt="炸鸡炸串" @click="toBusList(10)">
            <p class="picture-expain">炸鸡炸串</p>
        </li>
    </ul>
    </div>
    <div class="recommoned">
       
           <div>
            <h1>品质套餐</h1>
            <h3>搭配齐全吃的好</h3>
            <a @click="qianggou()" class="purchase">立即抢购 &gt;</a>
            </div>
            <img :src="food.foodImg" >
      
      
    </div>
    <div class="member">
     <div>
        <h1>超级会员</h1>
        <h2 >&#8226; 每月享超值权益</h2>
     </div>
     <h2 class="member-h2">立即开通  &gt;</h2>
    </div>
    <div class="nav-recommend">
        <h1>-------推荐商家--------</h1>
    </div>
    <div class="classify">
        <ul class="select">
            <li>综合排序</li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>筛选</li>
        </ul>
    </div>
    <div class="business">
      <ul class="bussinessUL" v-for="business in businessArr" v-bind:key="business.businessId" @click=" toBusinessInfo(business.businessId)">
    <div class="father-one">
            <img :src="business.businessImg" alt="">
                  <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3>{{ business.businessName }}</h3>   
                    </div>
                        <div class="business-info-h01">
            <img src="../img/ht01.png" alt="">
            <span class="business-brief">4.9 月售345单</span>
                        </div>
                <div class="business-info-h01">
             <p class="business-brief-01">￥{{business.starPrice}}起送|￥{{business.deliveryPrice}}配送</p>
                </div>
                            <div class="bussiness-brief-02">
                           新 饿了么新用户首单立减9元<br>
                           特 特价商品5元起
                            </div>
                            </div>
    </div>
    <div class="father-two">
            <div class="bussiness-brief-03">
                 <p class="send"> 蜂鸟转送<br></p>
                3.22km|30分钟<br>
                2个活动
            </div>
    </div>
      </ul>
      </div>
    <!-- </div>
    <div class="business">
      <ul class="bussinessUL">
    <div class="father-one">
            <img src="../img/sj02.png" alt="">
                  <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3>小锅豆腐馆（全运店）</h3>   
                    </div>
                        <div class="business-info-h01">
            <img src="../img/ht01.png" alt="">
            <span class="business-brief">4.9 月售345单</span>
                        </div>
                <div class="business-info-h01">
             <p class="business-brief-01">￥15起送|￥3配送</p>
                </div>
                            <div class="bussiness-brief-02">
                           新 饿了么新用户首单立减9元<br>
                           特 特价商品5元起
                            </div>
                            </div>
    </div>
    <div class="father-two">
            <div class="bussiness-brief-03">
               <p class="send"> 蜂鸟转送<br></p>
                3.22km|30分钟<br>
                2个活动
            </div>
    </div>
      </ul>
    </div>
    <div class="business">
      <ul class="bussinessUL">
    <div class="father-one">
        <img src="../img/sj03.png" alt="">
                  <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3>麦当劳麦乐送（全运路店）</h3>   
                    </div>
                        <div class="business-info-h01">
            <img src="../img/ht01.png" alt="">
            <span class="business-brief">4.9 月售345单</span>
                        </div>
                <div class="business-info-h01">
             <p class="business-brief-01">￥15起送|￥3配送</p>
                </div>
                            <div class="bussiness-brief-02">
                           新 饿了么新用户首单立减9元<br>
                           特 特价商品5元起
                            </div>
                            </div>
    </div>
    <div class="father-two">
            <div class="bussiness-brief-03">
                <p class="send"> 蜂鸟转送<br></p>
                3.22km|30分钟<br>
                2个活动
            </div>
    </div>
      </ul>
    </div>
 
    <div class="business">
      <ul class="bussinessUL">
    <div class="father-one">
            <img src="../img/sj04.png" alt="">
                  <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3>米村拌饭（浑南店）</h3>   
                    </div>
                        <div class="business-info-h01">
            <img src="../img/ht01.png" alt="">
            <span class="business-brief">4.9 月售345单</span>
                        </div>
                <div class="business-info-h01">
             <p class="business-brief-01">￥15起送|￥3配送</p>
                </div>
                            <div class="bussiness-brief-02">
                           新 饿了么新用户首单立减9元<br>
                           特 特价商品5元起
                            </div>
                            </div>
    </div>
    <div class="father-two">
            <div class="bussiness-brief-03">
                <p class="send"> 蜂鸟转送<br></p>
                3.22km|30分钟<br>
                2个活动
            </div>
    </div>
      </ul>
    </div>
    <div class="business">
      <ul class="bussinessUL">
    <div class="father-one">
            <img src="../img/sj05.png" alt="">
                  <div class="bussiness-info">
                    <div class="bussiness-info-h">
                        <h3>申记串道（中海康城店）</h3>   
                    </div>
                        <div class="business-info-h01">
            <img src="../img/ht01.png" alt="">
            <span class="business-brief">4.9 月售345单</span>
                        </div>
                <div class="business-info-h01">
             <p class="business-brief-01">￥15起送|￥3配送</p>
                </div>
                            <div class="bussiness-brief-02">
                           新 饿了么新用户首单立减9元<br>
                           特 特价商品5元起
                            </div>
                            </div>
    </div>
    <div class="father-two">
            <div class="bussiness-brief-03">
                <p class="send"> 蜂鸟转送<br></p>
                3.22km|30分钟<br>
                2个活动
            </div>
    </div>
      </ul>-->
    
</div>
<Footer></Footer>
</template>

<script >



export default{
    name:"Index",
    data(){
        return{
            searchKey:'',
            food:{},
            user:{},
            businessArr:[]
        }
    },
    created(){
        this.user = this.$getSessionStorage('user');
        this.$axios.post('BannerController/findBannerFood').then(response =>{
            this.food = response.data;
            console.log(this.food);
            
        }).catch(error =>{
            console.error(error);
            
        });
        this.$axios.post('BusinessController/listBusinessByOrderTypeId',this.$qs.stringify({
            orderTypeId:1
        })).then(response =>{
            this.businessArr = response.data;
        }).catch(error =>{
            console.error(error);
            
        })
    },
   
methods:{
    toBusinessInfo(businessId){
           // this.$router.push({path:'/bussnessInfor'});
            console.log('列表:'+businessId);
            this.$router.push({path:'/bussnessInfor',query:{businessId:businessId}});
 
        },
        toBusList(orderTypeId){
    this.$router.push({path:'/businessList',query:{orderTypeId:orderTypeId}});
        },
   // this.$router.push({path:'/businessList'});
   search(){
    // this.$axios.post('SearchController/searchByKey',this.$qs.stringify({
    //     searchKey:   this.searchKey
    // })).then(response =>{
    //     console.log(response.data)
    // }).catch(error =>{
    //     console.error(error);
        
    // })
    this.$router.push({path:'/goodsList',query:{  searchKey:this.searchKey}});
   },
   qianggou(){
    if(this.user ==null){
        alert("请先登录");
        this.$router.push({path:'/login'});
        return;
    }
    this.$router.push({path:'/bussnessInfor' , query:{businessId:this.food.businessId}})
   }
   


    }
}

</script>

<style>
.father-one{
    display: flex;
    justify-content: space-betweens;
    align-items: center;
}
li{
    list-style-type: none;
}
.header{
 
height: 314px;
background-color: #0097ff;
position: relative;

}
.locaiton{
 font-size: 20px;
 color: #ffffff;
position: absolute;
left: 10px;
top: 280px;
}
.search{
    width: 800px;
    height: 117px;
    background-color: aliceblue;
    color: #cbdff2;
    font-size: 50px;
    position: fixed;
    
    left: 450px;
   
}
.nav{
    width: 100%;
 
    height: 350px;
   
}
.nav-ul01 {
 display: flex;
 
 flex-wrap: wrap;
 justify-content: space-between;
 flex-direction: row;
 align-content: center;   
}
.nav-ul01 li{
    
    list-style-type: none;
    width: 20%;
    height: 200px;
}
.recommoned{
    display: flex;
    margin-top: 50px;
    /* background-image: url("../img/index_banner.png"); */
    background-size: cover;
    height: 200px;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;


}
.purchase{
    color: #feedc1;
}
.purchase{
    color: #d0af95;
}
.member{
    height: 148px;
    background-color: #feedc1;
    display: flex;
    justify-content: space-between;
    

}
.member-h2{
   padding-top: 60px;
}

.picture-expain{
    color: #666666;
    font-size: 25px;
}
.nav-recommend{
    height: 170px;
    width: 100%;
}
.select{
    display: flex;
    justify-content: space-between;
}
.select li{
    font-size: 20px;
}
.bussinessUL{
    display: flex;
    justify-content: space-between;
}
.business-info-h01 > img{
    width: 70px;
    height: 20px
}
.father-one>.bussiness-info{
    display: inline-block;
}
.SearchInput{
    width: 60%;
    height: 50px;
    font-size: 30px;
}
.business{
    height: 130px;
    margin-top: 50px;
}
.bussinessUL{
    width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.send{
    background-color: #0097ff;
    color: white;
}
</style>